<script setup>
  import { onMounted,ref } from 'vue'
  import { Swipe,SwipeItem } from 'vant'
  import { useRoute } from 'vue-router'
  const route = useRoute();
  import generatecode from "./generatecode";
  // import poster from '@/assets/poster.png'
  const qrcodeSrc = ref("")
  const baseImgUrl = '/pro-api/App/api/getImages?url='
  const query = route.query
  const poster = ref(baseImgUrl+query.poster_img);
  onMounted(()=>{
    generatecode(decodeURIComponent(query.qr_url),"分享",{width:250},baseImgUrl+query.product_img).then((src)=>{
      qrcodeSrc.value = src
    })
  })
</script>

<template>
  <div id="htmlToCanvas">
      <Swipe :loop="false" :width="360">
        <SwipeItem>
            <div class="posterContainer">
              <div>
                <div class="poster">
                  <img class="qrcodeSwiper" :src="qrcodeSrc" alt="">
                </div>
                <div class="copyBtn">复制推广链接</div>
                <div class="tips">长按二维码保存分享给好友</div>
              </div>
            </div>
        </SwipeItem>
        <!-- <SwipeItem>
            <div class="qrcodeContainer">
              <img class="qrcodeSwiper" :src="qrcodeSrc" alt="">
            </div>
        </SwipeItem> -->
      </Swipe>
  </div>
</template>

<style scoped>
    #htmlToCanvas{
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      min-height:100vh;
      justify-content: center;
    }
    .poster{
      width:262px;
      position: relative;
      border-right: 10px;
      overflow: hidden;
    }
    #htmlToCanvas .img{
      width:100%;
      display: block;
    }
    .qrcodeSrc{
      position: absolute;
      right:10px;
      bottom:30px;
      width:50px;
      height:50px;
    }
    .copyBtn{
      width: 230px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      margin: 32px auto 12px;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      background: linear-gradient(90deg,#75b6ff,#558dff);
      border-radius: 22px;
    }
    .posterContainer{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height:100vh;
    }
    .tips {
      color: #0173ff;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      margin-top: 20px;
      text-decoration: underline;
      margin-bottom: 25px;
    }
    .qrcodeSwiper{
      width:262px;
      height:262px;
      /* margin-top:150px; */
    }
    .qrcodeContainer{
      display: flex;
      align-items: center;
      justify-content: center;
    }
</style>
